<template>
  <!-- 运营系统-短剧列表 -->
  <d2-container class="d-flex flex-column">
    <template v-if="$hasPermission('playlet:playlet:index')">
      <div class="d-flex" slot="header">
        <el-form
          class="d-flex b-s my-10"
          :inline="true"
          size="small"
          :model="dataForm"
          @keyup.enter.native="getTableList()"
        >
          <el-form-item label="标签名称">
            <el-input
              v-model="dataForm.keyword"
              placeholder="标签名称"
              clearable
            />
          </el-form-item>

          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="getTableList()"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              icon="el-icon-circle-plus-outline"
              v-show="$hasPermission('playlet:playlet:create')"
              @click="addOrUpdateData()"
              >添加标签</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="d-flex h-100 b-s flex-column">
        <div class="d-flex flex-1">
          <div class="overflow">
            <vxe-grid
              keep-source
              border
              resizable
              highlight-hover-row
              size="small"
              ref="pGrid"
              :loading="tableLoading"
              :loading-config="{
                icon: 'vxe-icon-indicator roll',
                text: '正在拼命加载中...',
              }"
              :columns="columns"
              height="100%"
              :data="dataList"
              :customs.sync="customColumns"
              :row-config="{ useKey: true }"
              :column-config="{ useKey: true }"
              :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
            >
            </vxe-grid>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="d-flex" slot="footer">
        <vxe-pager
          background
          size="medium"
          align="right"
          :border="false"
          :current-page="dataForm.page"
          :page-size="dataForm.pageSize"
          :total="total"
          :layouts="[
            'PrevPage',
            'Number',
            'NextPage',
            'Sizes',
            'FullJump',
            'Total',
          ]"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </div>
      <!-- 新增/修改弹窗 -->
      <tag-add-or-update
        v-if="addOrUpdateVisible"
        ref="addOrUpdateDialog"
        @refreshDataList="getTableList"
      ></tag-add-or-update>
      <!-- 图片预览弹窗 -->
      <pic-preview v-if="picVisible" ref="picDialog"></pic-preview>
    </template>
    <template v-else>
      <div class="d-flex a-center j-center h-100 b-s flex-column">
        <img
          class="d-flex mb-10"
          :src="permissionBase64"
          alt="没有访问权限"
          style="width: 300px"
        />
        <div class="d-flex">抱歉，您没有访问权限</div>
      </div>
    </template>
  </d2-container>
</template>

<script>
let that;
import { mapState, mapMutations } from "vuex";
import mixinViewModule from "@/mixins/view-module";
import tagAddOrUpdate from "./tag-add-or-update";
import PicPreview from "./picPreview";
export default {
  mixins: [mixinViewModule],
  components: {
    PicPreview,
    tagAddOrUpdate,
  },
  data() {
    return {
      tableLoading: false,
      curent: 0,
      total: 0,
      curName: "",

      dataForm: {
        page: 1,
        pageSize: 10,
        keyword: "", //搜索
      },
      playTitle: "",
      innerPlayVisible: false,
      uploadAddVisible: false, //批量上传弹窗
      picVisible: false,
      videoVisible: false,
      // 增改
      addOrUpdateVisible: false,
      roleVisible: false,
      dataList: [],
      customColumns: [],
      columns: [
        {
          title: "ID",
          field: "id",
          width: 100,
          sortable: true,
          align: "center",
        },
        {
          title: "标签名称",
          field: "name",
          width: 200,
          sortable: false,
          align: "center",
        },

        {
          title: "排序",
          field: "sort",
          width: 100,
          sortable: false,
          align: "center",
        },

        {
          title: "创建时间",
          field: "created_at",
          width: 180,
          sortable: true,
          align: "center",
        },
        {
          title: "更新时间",
          field: "updated_at",
          width: 180,
          sortable: true,
          align: "center",
        },
        {
          title: "操作",
          field: "other",
          width: 200,
          fixed: "right",
          sortable: false,
          align: "center",
          slots: {
            default: ({ row }) => {
              return [
                <el-button
                  size="mini"
                  round
                  icon="el-icon-edit"
                  v-show={this.$hasPermission("playlet:playlet:update")}
                  onClick={() => this.addOrUpdateData(row)}
                  type="primary"
                >
                  {" "}
                  修改{" "}
                </el-button>,
                <el-button
                  size="mini"
                  round
                  icon="el-icon-delete"
                  v-show={this.$hasPermission("playlet:playlet:delete")}
                  type="danger"
                  onClick={() => this.deleteHandleSetter(row)}
                >
                  {" "}
                  删除{" "}
                </el-button>,
              ];
            },
          },
        },
      ],
    };
  },
  created() {
    if (this.$hasPermission("playlet:playlet:index")) {
      this.getTableList();
    }
  },
  mounted() {
    that = this;
    //预览图片
    window.previewPicFn = (url, title) => {
      console.log(url);
      console.log(title);
      that.picVisible = true;
      that.$nextTick(() => {
        that.$refs.picDialog.update(url, title);
      });
    };
  },
  computed: {
    ...mapState("d2admin/user", ["info"]),
  },
  methods: {
    ...mapMutations({
      pageInit: "d2admin/page/init",
      headerSet: "d2admin/menu/headerSet",
    }),
    async getTableList() {
      this.tableLoading = true;
	  if(this.dataForm.keyword!=''){
	  	this.dataForm.page = 1
	  }
      const tableRes = await this.$axios.get(
        "/api/playlet/tag?" + this.$qs.stringify(this.dataForm)
      );
      this.tableLoading = false;
      this.dataList = tableRes.data;
      this.total = tableRes.total;
    },
    //新增/修改弹窗
    async addOrUpdateData(row) {
      console.log(259,row);
      this.addOrUpdateVisible = true;
      if (typeof row == "object" && row != null) {
        // this.curName = row.real_name;
        const id = row.id;
        const userRes = await this.$axios.get(
          `/api/playlet/tag/update/${id}`,
          {}
        );
        this.$nextTick(() => {
          this.$refs.addOrUpdateDialog.bannerId = id;
          this.$refs.addOrUpdateDialog.innerTitle = row.name;
          this.$refs.addOrUpdateDialog.update(userRes);
        });
      } else {
        this.$nextTick(() => {
          this.$refs.addOrUpdateDialog.bannerId = null;
          this.$refs.addOrUpdateDialog.init();
        });
      }
    },
    // 删除
    deleteHandleSetter(row) {
      this.$confirm(
        this.$t("public.prompt.info", {
          handle: this.$t("views.public.delete"),
        }),
        this.$t("public.prompt.title"),
        {
          confirmButtonText: this.$t("views.public.confirm"),
          cancelButtonText: this.$t("views.public.cancel"),
          type: "warning",
        }
      )
        .then(() => {
          this.$axios
            .delete(`/api/playlet/tag/delete/${row.id}`, {})
            .then((res) => {
              this.$message({
                message: this.$t("views.public.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.getTableList();
                },
              });
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.vxe-cell .el-button) {
  margin-bottom: 10px;
}
.item {
  .close {
    width: 26px;
    height: 26px;
    border: 2px solid #f76f21;
    border-radius: 26px;
    .close-icon {
      font-size: 20px;
      color: #f76f21;
    }
  }
  .item-title {
    font-size: 22px;
    font-weight: bold;
  }

  .item-simulate {
    border: 6px solid #a3a2a2;
    border-radius: 10px;
    width: 375px;
    min-height: 700px;
    max-height: 1200px;
    margin: 0 auto 10px;
    padding: 10px 5px;

    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;

      .box {
        width: 165px;
        height: 93px;
        background: #f9f8f8;
        border: 2px solid #f5f5f5;
        border-radius: 8px;
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: flex-end !important;
        padding: 0 !important;
        box-sizing: content-box;
        margin: 10px 0;
        align-items: center;
        .pointer {
          width: 50%;
          height: auto;
          position: absolute;
          bottom: 0;
          right: 0;
        }
        .price {
          font-size: 15px;
          font-weight: 600;
          line-height: 35px;
          margin: 0;
          em {
            font-size: 35px;
            font-style: normal;
          }
        }
        .get {
          width: 100%;
          height: 28px;
          line-height: 28px;
          text-align: center;
          background: linear-gradient(180deg, #fff19d, #ff9e00);
          border-radius: 0 0 5px 5px;
          font-size: 14px;
          color: #583600;
          letter-spacing: 1px;
          font-weight: 500;
          margin: 0;
        }
      }
      .box-normal {
        .price {
          color: #f76f21;
        }
        .get {
          background: #fff7e3;
          color: #bf891c;
        }
      }
      .box-active {
        border: 2px solid #f97d36;
      }
    }
  }
}
</style>